<template>
  <div>
    <u-table-column align="left" label="平台" min-width="100">
      <template slot-scope="scope">
        <div class="flex">
          <PlatformIcon :data="scope.row.platformTypeName" />
          <ToolTip :content="scope.row.platformTypeName"/>
        </div>
      </template>
    </u-table-column>
    <u-table-column align="left" label="账号名称" min-width="120">
      <template slot-scope="scope">
        <ToolTip :content="scope.row.baseInfo.accountName"/>
      </template>
    </u-table-column>
    <u-table-column align="left" label="供应商名称" min-width="120">
      <template slot-scope="scope">
        <ToolTip :content="scope.row.cooperation" is-can-click @handelClick="toCooperation(scope.row)"/>
      </template>
    </u-table-column>
    <u-table-column align="left" label="账号ID" min-width="120">
      <template slot-scope="scope">
        <ToolTip :content="scope.row.baseInfo.accountId"/>
      </template>
    </u-table-column>
    <u-table-column align="left" label="签单签约经纪" min-width="120">
      <template slot-scope="scope">
        <ToolTip :content="scope.row.additionalKey.contractBroker"/>
      </template>
    </u-table-column>
    <u-table-column align="left" label="签约有效期" min-width="190">
      <template slot-scope="scope">
        <ToolTip :content="formatSignDate(scope.row)"/>
      </template>
    </u-table-column>
    <u-table-column align="left" label="签约状态" min-width="120">
      <template slot-scope="scope">
        <ToolTip :content="scope.row.signDetailStatus | signStatusFilter"/>
      </template>
    </u-table-column>
    <u-table-column align="left" label="到期时长" min-width="220">
      <template slot-scope="scope">
        <template v-if="hasContract(scope.row)">
          <div v-if="scope.row.isExpired" style="color: #FF4E5F">已到期</div>
          <div v-else-if="scope.row.expiredDuration || scope.row.expiredDuration === 0">距离到期日：<span :style="expiredTypeClass(scope.row.expiredDuration)">{{ scope.row.expiredDuration !== 9999 ? scope.row.expiredDuration : '--' }}</span> 天</div>
          <span v-else>距离到期日：-- 天</span>
        </template>
        <div v-else>{{ handleContent(scope.row) }}</div>
      </template>
    </u-table-column>
    <u-table-column align="left" label="创建人" min-width="120">
      <template slot-scope="scope">
        <ToolTip :content="scope.row.createName "/>
      </template>
    </u-table-column>
    <u-table-column align="left" label="创建时间" min-width="220">
      <template slot-scope="scope">
        <ToolTip :content="scope.row.createTime | format('YYYY/MM/DD HH:mm') "/>
      </template>
    </u-table-column>
  </div>
</template>
<script>
import { signStatusFilter } from '@/filters/status';
import { format } from '@/filters/date';
import { expiredTypeClass } from '@/views/signUp/components/status';
import PlatformIcon from '@/components/Common/platformIcon';
export default {
  components: { PlatformIcon },
  filters: {
    signStatusFilter, format
  },
  methods: {
    format,
    expiredTypeClass,
    formatSignDate(row) {
      if (row.additionalKey.signStartDate || row.additionalKey.signEndDate) {
        return this.format(row.additionalKey.signStartDate, 'YYYY/MM/DD') + '-' + this.format(row.additionalKey.signEndDate, 'YYYY/MM/DD');
      } else {
        return '--';
      }
    },
    // 根据签约状态展示对应内容
    hasContract({ signDetailStatus }) {
      return [2, 5].includes(signDetailStatus);// 已签约、已续约
    },
    handleContent({ signDetailStatus }) {
      switch (signDetailStatus) {
        case 1:return '无合同';
        case 6:return '无新合同';
        default:return '--';
      }
    },
    toCooperation(row) {
      const url = this.$router.resolve({
        name: 'supplierManageDetail',
        params: { id: row.supplierId }
      });
      window.open(url.href, '_blank');
    }
  }
};
</script>
